hooks 基础

React Hooks 不能在条件语句、循环或嵌套函数中调用，这是由 React 的 Hooks 执行机制决定的。根本原因在于：React 依赖 Hooks 的调用顺序来正确管理状态和副作用。

---

🔑 核心原理：Hooks 依赖“调用顺序”而非“变量名”

React 并不是通过变量名（如 count）来识别哪个状态属于哪个 Hook，而是严格按照每次渲染时 Hooks 的调用顺序来匹配状态。

🧠 内部实现简化示意：

React 在组件内部维护一个 Hook 链表（或数组），每次渲染时按顺序读取/更新：

// 第一次渲染（挂载）
useState(0)      → 创建状态 #1: { value: 0, setter: ... }
useEffect(...)   → 创建副作用 #2

// 第二次渲染（更新）
useState(0)      → 读取状态 #1（忽略初始值！）
useEffect(...)   → 更新副作用 #2

✅ 只要每次渲染的 Hook 调用顺序完全一致，React 就能正确关联状态。

---

✅ 总结

问题	答案
为什么不能在 if 中用 Hook？	会破坏 Hooks 的调用顺序，导致状态错乱
React 如何识别不同 Hook？	按渲染时的调用顺序，而非变量名
如何安全地做条件逻辑？	1. 把条件放进 Hook 回调内 2. 用依赖项控制 useEffect 3. 拆分组件
有例外吗？	没有！ 所有内置 Hook 和自定义 Hook 都必须遵守

（Hooks 必须在 React 函数的顶层调用）